<template>
  <div class="page bgc-fff">
    <x-header title="运单列表"></x-header>
    <!--筛选组件(该组件只支持2层，一级 二级)-->
    <screen-view
      :screenData="screenData"
      :haveCheckData="haveCheckData"
      @screen-confirm="haveScreen"></screen-view>
    <!--主体-->
    <div class=" main-body" style="margin-top: .97rem"
         :style="[{'-webkit-overflow-scrolling': scrollMode}]" >
      <div v-if="shipListData.length==0" class="f14 c-666 ta-c pad-l-r15 pad-t20">暂无运单数据</div>
      <v-loadmore v-else :top-method="loadTop" :bottom-method="loadBottom"
                  :bottom-all-loaded="allLoaded"
                  :auto-fill="false" ref="loadmore">
        <div v-for="(item,index) in shipListData" :key="index" @click="waybillClick(item)">
          <div class="waybill-item">
            <!-- con-1 -->
            <div class="flex a-between l-center mb10 pad-l-r15">
              <div class="flex a-left l-center">
                <img :src="staticImgData.imgurla" class="icon-tou mr15" alt="">
                <span class="c-1E90FF f16 bold mr5">运单通知</span>
                <span class="c-1E90FF f16">{{item.code}}</span>
              </div>
              <div>
                <!-- 拓展预留 -->
              </div>
            </div>
            <div v-show="item.driverName && item.transportationId" class="pad-l-r30 f14 c-333" >
              <div class="flex l-center a-start pad-t10">
                <span class="c-999">司机：</span><span class="mr10">{{item.driverName}}</span>
                <span class="c-999">车牌号：</span><span>{{item.transportationId}}</span>
              </div>
              <div class="flex l-center a-start pad-t10">
                <span class="c-999">车队：</span><span>{{item.fleetName}}</span>
              </div>
              <div class="flex l-center a-start pad-t10">
                <span class="c-999">指令号：</span><span class="mr10">{{item.shipSourceKey}}</span>
              </div>
            </div>
            <!-- con-2 -->
            <div class="pad-l-r15 bor-bottom" >
              <div v-if="index2 < 2" v-for="(item2,index2) in item.shipTaskCountBos" :key="index2"
                   :class="[{'bor-bottom':index2 <(2-1)}]">
                <div class="f14 c-333 pad-t10 pad-l-r15 ta-l flex l-center a-start" >
                  <span class="c-999">运输任务：</span><span>{{item2.taskCode}}</span>
                </div>
                <div class="f12 c-999 pad-t10 f-l ta-l pad-l-r15">
                  {{item2.gmtCreate|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
                </div>
                <!-- con-3 -->
                <div class="f14 c-000 mt20  pad-l-r15" >
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">起运地：</p>
                    <p v-if="item2.startAddress">{{item2.startAddress}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">目的地：</p>
                    <p v-if="item2.endAddress">{{item2.endAddress}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">运抵时间：</p>
                    <p v-if="item2.gmtDeliver">{{item2.gmtDeliver|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center">
                    <p class="c-666">车辆台数：</p>
                    <p v-if="item2.itemCount">{{item2.itemCount}}台</p>
                    <p v-else>暂无</p>
                  </div>
                  <div style="height:.2rem;"></div>
                </div>
              </div>
            </div>
            <!-- con-4 -->
            <div class="f16 c-1E90FF ta-r h100 line-h100 pad-l-r15">
              详情 <i class="iconfont icon-arrow-right3 f14"></i>
            </div>
          </div>
          <div class="mo-spacing"></div>
        </div>
      </v-loadmore>
      <div style="height:.5rem;"></div>
      <v-tabbar></v-tabbar>
    </div>
    <!--loading-->
    <v-loading v-show="loadingShow"></v-loading>
    <confirm
      v-model="confirmShow"
      :show-cancel-button="false"
      :title="confirmData.title"
      @on-confirm="onConfirm">
      <p style="text-align:center;">{{confirmData.context}}</p>
    </confirm>
  </div>
</template>

<script type="text/ecmascript-6">
  import LisaTabbar from '@/components/common/tabbar/tabbar'
  import { Confirm, XHeader } from 'vux'
  import { mapState } from 'vuex'
  import * as WaybillApi from '@/api/waybill'
  import * as TenantApi from '@/api/tenant'
  import { Loadmore, Toast } from 'mint-ui'
  import Loading from '@/components/common/loading/loading'
  import ScreenView from '@/components/common/screen/screen'
  import * as SessionS from '@/utils/store/storage'
  import * as ThreeStorage from '@/utils/store/token.js'
  export default {
    name: 'shipOrder-list',
    data() {
      return {
        screenData: [
          { value: 'issue', label: '发运', options: [{ value: 'y', label: '已发运' }, { value: 'n', label: '未发运' }] },
          { value: 'arrive', label: '运抵', options: [{ value: 'y', label: '已运抵' }, { value: 'n', label: '未运抵' }] }
        ], // 筛选 结构 数组
        haveCheckData: {
          nowCheck: 'issue',
          issue: '',
          issueIndex: -1,
          arrive: '',
          arriveIndex: -1
        }, // 筛选 选中记录
        navName: '', // footer_nav 传选中nav的name
        staticImgData: {
          imgurla: require('@/assets/image/v1/waybill/waybill_list/icon_tou.png')
        },
        shipListData: [],
        page: {
          current: 1,
          size: 2,
          total: 1,
          condition: {
          }
        },
        gmtCreateStamp: '',
        confirmShow: false, // vux-confirm提示弹窗
        confirmData: {
          title: '提示',
          context: '正在建设中,后续开放...'
        },
        loadingShow: false,
        allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      }
    },
    computed: {
      ...mapState({
        DriverId: state => state.account.DriverId
      })
    },
    components: {
      Confirm, XHeader,
      'v-tabbar': LisaTabbar,
      'v-loadmore': Loadmore,
      ScreenView,
      'v-loading': Loading
    },
    created() {
      this.loadPageList(this.haveCheckData)
    },
    methods: {
      onConfirm: function() {
        console.log('confirm()-确定')
      },
      loadTop: function() { // 组件提供的下拉触发方法
        // 下拉加载
        this.loadingShow = true
        this.allLoaded = false // 刷新时置为true
        this.page.current = 1 // 从第1页开始
        this.loadPageList(this.haveCheckData)
        this.$refs.loadmore.onTopLoaded() // 固定方法，查询完要调用一次，用于重新定位
      },
      loadBottom: function() {
        // 上拉加载
        this.loadingShow = true
        this.getMore() // 上拉触发的分页查询
        this.$refs.loadmore.onBottomLoaded() // 固定方法，查询完要调用一次，用于重新定位
      },
      // 筛选-选择 type-筛选类型  item-筛选二级选中项 index-筛选二级index
      haveScreen(data) {
        const { type, item, index } = data
        this.haveCheckData.nowCheck = type
        if (type === 'issue') {
          this.haveCheckData.issue = item.value
          this.haveCheckData.issueIndex = index
          this.loadPageList(this.haveCheckData)
        }
        if (type === 'arrive') {
          this.haveCheckData.arrive = item.value
          this.haveCheckData.arriveIndex = index
          if (this.haveCheckData.issue === 'n') {
            Toast({
              message: '未发运，不能同步查询已运抵',
              duration: 2000
            })
          } else {
            this.loadPageList(this.haveCheckData)
          }
        }
      },
      loadPageList: function(toParams) {
        // 查询数据
        const that = this
        const { issue, arrive } = toParams
        that.loadingShow = true
        const loginType = ThreeStorage.getLoginType()
        if (loginType === 'company') {
          // this.gmtCreateStamp = Date.parse(new Date())
          const tenant_Id = ThreeStorage.getTenantId()
          that.page = {
            current: 1,
            size: 2,
            total: 1,
            condition: {
              issue, arrive,
              gmtCreate: null,
              tenantId: tenant_Id
            }
          }
          that.loadingShow = true
          TenantApi.companyShipList(that.page).then(res => {
            // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
            if (res.code === 0) {
              that.shipListData = res.data.records
              if (that.page.current > 1) {
                that.isHaveMore(res.data)
              }
              that.loadingShow = false
            } else {
              console.warn('error', res)
              that.loadingShow = false
            }
            that.$nextTick(function() {
              that.scrollMode = 'touch'
            })
          }).catch(res => {
            this.loadingShow = false
            console.log('error', res)
          })
        } else {
          const driver_Id = ThreeStorage.getDriverId()
          that.page = {
            current: 1,
            size: 2,
            total: 1,
            condition: {
              issue, arrive,
              driverId: driver_Id
            }
          }
          WaybillApi.getWaybillList(that.page).then(res => {
            // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
            if (res.code === 0) {
              that.shipListData = res.data.records
              if (that.page.current > 1) {
                that.isHaveMore(res.data)
              }
              that.loadingShow = false
            } else {
              console.warn('error', res)
              that.loadingShow = false
            }
            that.$nextTick(function() {
              that.scrollMode = 'touch'
            })
          }).catch(res => {
            this.loadingShow = false
            console.log('error', res)
          })
        }
      },
      getMore: function() {
        // 分页查询
        const that = this
        that.page.current = parseInt(that.page.current) + 1
        const loginType = ThreeStorage.getLoginType()
        if (loginType === 'company') {
          TenantApi.companyShipList(that.page).then(res => {
            this.loadingShow = false
            if (res.code === 0) {
              that.shipListData = that.shipListData.concat(res.data.records)
              if (that.page.current > 1) {
                that.isHaveMore(res.data)
              }
            }
          }).catch(res => {
            this.loadingShow = false
            console.log('error', res)
          })
        } else {
          WaybillApi.getWaybillList(that.page).then(res => {
            this.loadingShow = false
            if (res.code === 0) {
              that.shipListData = that.shipListData.concat(res.data.records)
              if (that.page.current > 1) {
                that.isHaveMore(res.data)
              }
            }
          }).catch(res => {
            this.loadingShow = false
            console.warn('error', res)
          })
        }
      },
      isHaveMore: function(data) {
        // 是否还有下一页，如果没有就禁止上拉刷新
        const that = this
        const now_show_num = that.shipListData.length
        const get_total = data.total
        if (now_show_num < get_total) {
          // 展示的条数 小于 后端总条数 还可以下拉加载更多
          console.log('可继续下拉加载更多')
          this.allLoaded = false
        } else if (now_show_num === get_total) {
          // 展示的条数 等于 后端总条数 没有更多数据 不能进行下拉加载
          console.log('没有更多数据，不能进行下拉')
          this.allLoaded = true
          Toast({
            message: '没有更多数据了',
            duration: 1000
          })
        }
      },
      waybillClick: function(item) {
        const that = this
        SessionS.saveToSession('waybillItem', item)
        const loginType = ThreeStorage.getLoginType()
        if (loginType === 'company') {
          that.$router.push({ name: 'shipOrder-adminDetail', params: { waybillItem: item }})
          // this.confirmShow = true // vux提示弹窗
        } else {
          that.$router.push({ name: 'shipOrder-driverDetail', params: { waybillItem: item }})
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
    background-color: #f4f4f4;
  }
  .page.bgc-fff{
    background-color: #fff;
  }
  .h100{
    height: .5rem;
  }
  .line-h100{
    line-height: .5rem;
  }
  .waybill-item{
    padding:.21rem 0 0 0;
    background-color: #fff;
    border-radius: .04rem;
  }
  .icon-tou{
    width: .04rem;
    height: .15rem;
  }
  div>span{
    display: block;
  }
</style>
